<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高速九宫格抽奖系统</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #1a2980, #26d0ce);
      color: #fff;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      overflow-x: hidden;
    }

    .container {
      max-width: 800px;
      width: 100%;
      text-align: center;
      animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    header {
      margin: 20px 0 30px;
      text-align: center;
    }

    h1 {
      font-size: 2.8rem;
      margin-bottom: 15px;
      text-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
      background: linear-gradient(to right, #ff9966, #ff5e62);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      letter-spacing: 1px;
    }

    .subtitle {
      font-size: 1.3rem;
      opacity: 0.9;
      margin-bottom: 25px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;
    }

    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 15px;
      max-width: 500px;
      margin: 0 auto 30px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      padding: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      backdrop-filter: blur(10px);
    }

    .grid-item {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 15px;
      height: 150px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 15px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .grid-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0));
      z-index: 1;
    }

    .grid-item.active {
      background: rgba(255, 215, 0, 0.3);
      transform: scale(1.05);
      box-shadow: 0 0 30px rgba(255, 215, 0, 0.7);
      z-index: 2;
    }

    .grid-item.win {
      animation: winPulse 1s infinite;
    }

    @keyframes winPulse {
      0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
      50% { box-shadow: 0 0 30px rgba(255, 215, 0, 0.9); }
      100% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.5); }
    }

    .prize-icon {
      font-size: 3rem;
      margin-bottom: 10px;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .prize-name {
      font-size: 1.1rem;
      font-weight: bold;
      z-index: 2;
    }

    .prize-value {
      font-size: 0.9rem;
      opacity: 0.8;
      z-index: 2;
    }

    .button-container {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin: 20px 0 30px;
      flex-wrap: wrap;
    }

    .btn {
      padding: 15px 35px;
      font-size: 1.2rem;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      font-weight: bold;
      transition: all 0.3s ease;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .btn-start {
      background: linear-gradient(45deg, #00c853, #64dd17);
      color: white;
    }

    .btn-start:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 200, 83, 0.4);
    }

    .btn-start:disabled {
      background: linear-gradient(45deg, #888, #aaa);
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .btn-stop {
      background: linear-gradient(45deg, #ff5252, #ff4081);
      color: white;
    }

    .btn-stop:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(255, 82, 82, 0.4);
    }

    .btn-stop:disabled {
      background: linear-gradient(45deg, #888, #aaa);
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    .btn-reset {
      background: linear-gradient(45deg, #2196F3, #21CBF3);
      color: white;
    }

    .btn-reset:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(33, 150, 243, 0.4);
    }

    .result-container {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 15px;
      padding: 25px;
      margin: 20px auto;
      max-width: 500px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      animation: slideUp 0.5s ease-out;
    }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .result-title {
      font-size: 1.8rem;
      margin-bottom: 20px;
      color: #FFD700;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .result-content {
      font-size: 1.8rem;
      font-weight: bold;
      margin: 20px 0;
      min-height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .result-icon {
      font-size: 4rem;
      margin-bottom: 15px;
      animation: bounce 1s infinite alternate;
    }

    @keyframes bounce {
      from { transform: translateY(0); }
      to { transform: translateY(-15px); }
    }

    .result-text {
      text-align: center;
    }

    .result-name {
      font-size: 2rem;
      margin-bottom: 10px;
    }

    .result-value {
      font-size: 1.3rem;
      opacity: 0.9;
    }

    .history {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 15px;
      padding: 25px;
      margin-top: 30px;
      max-width: 500px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      animation: slideUp 0.5s ease-out;
    }

    .history h2 {
      margin-bottom: 20px;
      color: #FFD700;
      text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      font-size: 1.8rem;
    }

    .history-list {
      max-height: 200px;
      overflow-y: auto;
      text-align: left;
    }

    .history-item {
      padding: 12px 15px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s ease;
    }

    .history-item:hover {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
    }

    .history-item:last-child {
      border-bottom: none;
    }

    .history-icon {
      font-size: 1.5rem;
      margin-right: 15px;
    }

    .history-details {
      flex: 1;
    }

    .history-name {
      font-size: 1.2rem;
      font-weight: bold;
    }

    .history-value {
      font-size: 1rem;
      opacity: 0.8;
    }

    .history-time {
      font-size: 0.9rem;
      opacity: 0.7;
    }

    .footer {
      margin-top: 40px;
      font-size: 1rem;
      opacity: 0.8;
      text-align: center;
      padding: 15px;
      width: 100%;
    }

    @media (max-width: 600px) {
      .grid-item {
        height: 100px;
      }

      .prize-icon {
        font-size: 2rem;
      }

      .prize-name {
        font-size: 0.9rem;
      }

      .result-name {
        font-size: 1.5rem;
      }

      .btn {
        padding: 12px 25px;
        font-size: 1.1rem;
      }
    }

    .confetti {
      position: fixed;
      width: 10px;
      height: 10px;
      background-color: #f00;
      top: -10px;
      animation: fall linear forwards;
    }

    @keyframes fall {
      to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
      }
    }

    .speed-control {
      background: rgba(255, 255, 255, 0.15);
      border-radius: 15px;
      padding: 15px;
      margin: 20px auto;
      max-width: 500px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.18);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    }

    .speed-control h3 {
      margin-bottom: 10px;
      color: #FFD700;
    }

    .slider-container {
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .slider-container input {
      flex: 1;
      height: 10px;
      -webkit-appearance: none;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 5px;
      outline: none;
    }

    .slider-container input::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ff5252;
      cursor: pointer;
    }

    .speed-value {
      min-width: 40px;
      font-weight: bold;
    }
  </style>
</head>
<body>
<div class="container">
  <header>
    <h1>⚡ 高速九宫格抽奖 ⚡</h1>
    <p class="subtitle">优化转速版 - 点击开始按钮，体验更快的抽奖速度！</p>
  </header>

  <div class="speed-control">
    <h3>抽奖速度控制</h3>
    <div class="slider-container">
      <input type="range" id="speedSlider" min="1" max="10" value="5">
      <span class="speed-value" id="speedValue">5</span>
    </div>
  </div>

  <div class="grid-container">
    <div class="grid-item">
      <div class="prize-icon">🎮</div>
      <div class="prize-name">游戏主机</div>
      <div class="prize-value">价值 ¥2999</div>
    </div>
    <div class="grid-item">
      <div class="prize-icon">📱</div>
      <div class="prize-name">智能手机</div>
      <div class="prize-value">价值 ¥3999</div>
    </div>
    <div class="grid-item">
      <div class="prize-icon">💻</div>
      <div class="prize-name">笔记本电脑</div>
      <div class="prize-value">价值 ¥5999</div>
    </div>
    <div class="grid-item">
      <div class="prize-icon">🎧</div>
      <div class="prize-name">无线耳机</div>
      <div class="prize-value">价值 ¥899</div>
    </div>
    <div class="grid-item">
      <div class="prize-icon">⌚</div>
      <div class="prize-name">智能手表</div>
      <div class="prize-value">价值 ¥1299</div>
    </div>
    <div class="grid-item">
      <div class="prize-icon">🎁</div>
      <div class="prize-name">神秘礼盒</div>
      <div class="prize-value">价值 ¥1999</div>
    </div>
    <div class="grid-item">
      <div class="prize-icon">🎫</div>
      <div class="prize-name">优惠券</div>
      <div class="prize-value">满 ¥1000 减 ¥200</div>
    </div>
    <div class="grid-item">
      <div class="prize-icon">🧧</div>
      <div class="prize-name">现金红包</div>
      <div class="prize-value">¥888</div>
    </div>
    <div class="grid-item">
      <div class="prize-icon">🎨</div>
      <div class="prize-name">画板套装</div>
      <div class="prize-value">价值 ¥599</div>
    </div>
  </div>

  <div class="button-container">
    <button class="btn btn-start" id="startButton">
      开始抽奖
    </button>
    <button class="btn btn-stop" id="stopButton" disabled>
      停止抽奖
    </button>
    <button class="btn btn-reset" id="resetButton">
      重新开始
    </button>
  </div>

  <div class="result-container">
    <div class="result-title">🎉 抽奖结果 🎉</div>
    <div class="result-content" id="resultContent">
      <div class="result-icon">🎰</div>
      <div class="result-text">等待抽奖开始...</div>
    </div>
  </div>

  <div class="history">
    <h2>📜 抽奖记录 📜</h2>
    <div class="history-list" id="historyList">
      <div class="history-item">
        <div class="history-icon">📝</div>
        <div class="history-details">
          <div class="history-name">暂无抽奖记录</div>
        </div>
        <div class="history-time">--</div>
      </div>
    </div>
  </div>

  <div class="footer">
    <p>高速九宫格抽奖系统 © 2023 | 优化转速版</p>
  </div>
</div>

<script>
  // 获取DOM元素
  const gridItems = document.querySelectorAll('.grid-item');
  const startButton = document.getElementById('startButton');
  const stopButton = document.getElementById('stopButton');
  const resetButton = document.getElementById('resetButton');
  const resultContent = document.getElementById('resultContent');
  const historyList = document.getElementById('historyList');
  const speedSlider = document.getElementById('speedSlider');
  const speedValue = document.getElementById('speedValue');

  // 奖品数据
  const prizes = [
    { name: "游戏主机", value: "价值 ¥2999", icon: "🎮" },
    { name: "智能手机", value: "价值 ¥3999", icon: "📱" },
    { name: "笔记本电脑", value: "价值 ¥5999", icon: "💻" },
    { name: "无线耳机", value: "价值 ¥899", icon: "🎧" },
    { name: "智能手表", value: "价值 ¥1299", icon: "⌚" },
    { name: "神秘礼盒", value: "价值 ¥1999", icon: "🎁" },
    { name: "优惠券", value: "满 ¥1000 减 ¥200", icon: "🎫" },
    { name: "现金红包", value: "¥888", icon: "🧧" },
    { name: "画板套装", value: "价值 ¥599", icon: "🎨" }
  ];

  // 抽奖状态变量
  let isSpinning = false;
  let currentIndex = 0;
  let baseSpeed = 50; // 基础速度（毫秒）
  let speedFactor = 5; // 速度因子（1-10）
  let timer = null;
  let winIndex = -1;
  let history = [];

  // 设置速度滑块
  speedSlider.addEventListener('input', function() {
    speedFactor = parseInt(this.value);
    speedValue.textContent = speedFactor;
  });

  // 计算实际速度
  function getActualSpeed() {
    // 速度因子越大，实际速度越快（间隔时间越短）
    return Math.max(10, baseSpeed / speedFactor);
  }

  // 开始抽奖
  function startLottery() {
    if (isSpinning) return;

    // 重置状态
    resetLottery();
    isSpinning = true;
    startButton.disabled = true;
    stopButton.disabled = false;

    // 更新结果展示
    resultContent.innerHTML = `
                <div class="result-icon">🎡</div>
                <div class="result-text">抽奖进行中...</div>
            `;

    // 随机决定中奖位置
    winIndex = Math.floor(Math.random() * prizes.length);

    // 开始动画
    animateLottery();
  }

  // 抽奖动画（优化转速）
  function animateLottery() {
    // 移除所有高亮
    gridItems.forEach(item => item.classList.remove('active'));

    // 高亮当前格子
    gridItems[currentIndex].classList.add('active');

    // 移动到下一个格子
    currentIndex = (currentIndex + 1) % gridItems.length;

    // 检查是否到达中奖位置
    if (currentIndex === winIndex && Math.random() > 0.7) {
      // 中奖处理
      setTimeout(endLottery, 100);
      return;
    }

    // 继续动画
    timer = setTimeout(animateLottery, getActualSpeed());
  }

  // 停止抽奖
  function stopLottery() {
    if (!isSpinning) return;

    clearTimeout(timer);
    isSpinning = false;

    // 随机决定中奖位置（如果还没确定）
    if (winIndex === -1) {
      winIndex = Math.floor(Math.random() * prizes.length);
    }

    // 高亮中奖格子
    gridItems.forEach(item => item.classList.remove('active'));
    gridItems[winIndex].classList.add('active', 'win');

    // 显示结果
    showResult();

    // 恢复按钮状态
    startButton.disabled = false;
    stopButton.disabled = true;
  }

  // 结束抽奖
  function endLottery() {
    stopLottery();
  }

  // 显示结果
  function showResult() {
    const prize = prizes[winIndex];

    resultContent.innerHTML = `
                <div class="result-icon">${prize.icon}</div>
                <div class="result-text">
                    <div class="result-name">${prize.name}</div>
                    <div class="result-value">${prize.value}</div>
                </div>
            `;

    // 创建彩色纸屑效果
    createConfetti();

    // 添加到历史记录
    addToHistory(prize);
  }

  // 创建彩色纸屑效果
  function createConfetti() {
    const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
    const container = document.body;

    for (let i = 0; i < 150; i++) {
      const confetti = document.createElement('div');
      confetti.className = 'confetti';
      confetti.style.left = Math.random() * 100 + 'vw';
      confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
      confetti.style.width = Math.random() * 10 + 5 + 'px';
      confetti.style.height = Math.random() * 10 + 5 + 'px';
      confetti.style.animationDuration = Math.random() * 3 + 2 + 's';
      container.appendChild(confetti);

      // 移除元素
      setTimeout(() => {
        confetti.remove();
      }, 5000);
    }
  }

  // 添加到历史记录
  function addToHistory(prize) {
    // 更新历史记录数组
    const now = new Date();
    const timeString = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`;

    history.unshift({
      name: prize.name,
      value: prize.value,
      icon: prize.icon,
      time: timeString
    });

    // 只保留最近5条记录
    if (history.length > 5) {
      history.pop();
    }

    // 更新历史记录显示
    updateHistoryList();
  }

  // 更新历史记录列表
  function updateHistoryList() {
    if (history.length === 0) {
      historyList.innerHTML = `
                    <div class="history-item">
                        <div class="history-icon">📝</div>
                        <div class="history-details">
                            <div class="history-name">暂无抽奖记录</div>
                        </div>
                        <div class="history-time">--</div>
                    </div>
                `;
      return;
    }

    historyList.innerHTML = '';
    history.forEach(item => {
      const historyItem = document.createElement('div');
      historyItem.className = 'history-item';
      historyItem.innerHTML = `
                    <div class="history-icon">${item.icon}</div>
                    <div class="history-details">
                        <div class="history-name">${item.name}</div>
                        <div class="history-value">${item.value}</div>
                    </div>
                    <div class="history-time">${item.time}</div>
                `;
      historyList.appendChild(historyItem);
    });
  }

  // 重置抽奖
  function resetLottery() {
    clearTimeout(timer);
    isSpinning = false;
    currentIndex = 0;
    winIndex = -1;

    // 移除所有高亮
    gridItems.forEach(item => {
      item.classList.remove('active', 'win');
    });

    // 重置结果显示
    resultContent.innerHTML = `
                <div class="result-icon">🎰</div>
                <div class="result-text">等待抽奖开始...</div>
            `;

    // 恢复按钮状态
    startButton.disabled = false;
    stopButton.disabled = true;
  }

  // 事件监听
  startButton.addEventListener('click', startLottery);
  stopButton.addEventListener('click', stopLottery);
  resetButton.addEventListener('click', resetLottery);

  // 初始化历史记录
  updateHistoryList();
</script>
</body>
</html>